<div class="tab tab2">
    <h1>数据的双向绑定</h1>
    <div>
        姓名:<input type="text" ng-model="name">
        <br>
        性别:<input type="radio" name="sex" value="男" ng-model="sex">男
        <input type="radio" name="sex" value="女" ng-model="sex">女
        <br>
        兴趣:<input type="checkbox" name="interest" value="游泳" ng-model="interest">游泳
        <input type="checkbox" name="interest" value="旅游" ng-model="interest">旅游
        <input type="checkbox" name="interest" value="打篮球" ng-model="interest">打篮球
        <fieldset>
            <legend>{{name}}的基本信息如下:</legend>
            <br>
            性别:{{sex}}
            <br>
            兴趣爱好:{{interest}}
        </fieldset>
    </div>
    <h1>数据的循环</h1>
    <div>
        <input type="text" ng-model="nameText" placeholder="请输入过滤信息:"/>
        <ul>
            <li ng-repeat="info in names | filter:nameText">
                {{$index +1}}.今年{{info.name}}已经{{info.age}}岁了!
                {{$first}}-{{$middle}}-{{$last}}-{{$even}}-{{$odd}}
            </li>
        </ul>
    </div>
    <h1>数据的双重循环</h1>
    <div>
        <table class="table table-bordered">
            <tr style="font-size:26px;">
                <th class="col-xs-3"></th>
                <th class="col-xs-3 text-center">p2p</th>
                <th class="col-xs-3 text-center">余额宝</th>
                <th class="col-xs-3 text-center">银行理财产品</th>
            </tr>
            <tr ng-repeat="info in infoList" ng-cloak>
                <!-- 第一列是标题 -->
                <td class="text-right title-desc" ng-bind="info.title"></td>
                <!--三列是循环出来的-->
                <!-- 循环三次 -->
                <td class="text-center" ng-repeat="key in ['p2p','yeb','bank']">
                    <!--如果是true的情况或者是有值的情况-->
                    <span ng-if="info[key]">
                        <!--有值的情况-->
                        <span ng-if="info[key].length" ng-bind="info[key]"></span>
                        <!--true的情况下-->
                        <span ng-if="!info[key].length" class="glyphicon glyphicon-ok is-support"></span>
                    </span>
                    <!--如果是false的情况下-->
                    <span ng-if="!info[key]" class="glyphicon glyphicon-remove is-support"></span>
                </td>
            </tr>
        </table>
    </div>
    <h1>内置的数据过滤</h1>
    <div>
        <p>内置的数据过滤器</p>
        <p>写法: 表达式 | 过滤器名称:参数</p>
        <ul ng-init="filterList=['currency','date','filter','json','limitTo', 'lowercase', 'number', 'orderBy', 'uppercase']">
            <li ng-repeat="name in filterList | filter:lowercase ">{{name}}</li>
        </ul>
    </div>
    <h1>数据过滤的用法</h1>
    <div>
        全局搜索:<input type="text" ng-model="teamInfo.$"/>
        比赛轮次:
        <select ng-model="teamInfo.Round" ng-options="v for v in uniqueRound" ng-change="resetFilter(teamInfo.Round)">
            <option value="">请选择比赛轮次</option>
        </select>
        比赛球场:
        <input type="text" ng-model="teamInfo.Situation"/>
        比赛日期:
        <select ng-model="teamInfo.date" ng-options="v for v in uniqueDate" ng-change="resetFilter(teamInfo.date)">
            <option value="">请选择比赛日期</option>
        </select>
        <br/><br/>
    </div>
    <table>
        <tr>
            <th>场次</th>
            <th>轮次</th>
            <th>主场</th>
            <th>客场</th>
            <th>城市</th>
            <th>球场</th>
            <th>日期</th>
        </tr>
        <tr ng-repeat="v in footballData | filter:teamInfo" align="center">
            <td ng-bind="$index + 1"></td>
            <td ng-bind="v.Round"></td>
            <td ng-bind="v.Team1"></td>
            <td ng-bind="v.Team2"></td>
            <td ng-bind="v.MatchCity"></td>
            <td ng-bind="v.Situation"></td>
            <td ng-bind="v.date"></td>
        </tr>
    </table>
    <h1>自定义的过滤器</h1>
    <div>
        <h3>第一种过滤器:</h3>
        <p>原有过滤:{{names[0].name}}</p>
        <p>过滤后的数据:{{names[0].name | filter1}}</p>
    </div>
    <div>
        <h3>第二种带参数的过滤器:</h3>
        <p>原有的数据:{{names[0].name}}</p>
        <p>过滤的数据:{{names[0].name | filter2:5}}</p>
    </div>
    <div>
        <h3>第三种数据过滤器:</h3>
        <ul>
            <Li ng-repeat="word in ['aa','bb','cc','dd'] | filter3">{{word}}</Li>
        </ul>
    </div>
    <div>
        <h3>四、首字母大写过滤器：</h3><br/>
        {{'this is angular js course on each.com' | filter4}}
    </div>
    <h1>ng-options的使用</h1>
    <div>
        <select ng-model="selectedPerson" ng-options="obj.name for obj in people"></select>
        <select ng-model="selectedGenre">
            <!-- 根据每条数据中的ID值来显示不同的兴趣值 -->
            <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>
        </select>
    </div>
    <h1>ng-options首项空白问号</h1>
    <div>
        选择以下人物：
        <!--这里的selectedPeople是选择的值-->
        <select ng-model="selectedPeople" ng-options="v.name for v in people"></select>
        ng-repeat解决首项空白：
        <select>
            <option ng-repeat="v in people">{{ v.name }}</option>
        </select>
        ng-options解决首项空白：
        <select ng-model="selectedYourPeople" ng-options="v.name as v.name for v in people"></select>
    </div>
    <h1>各种各样的下拉</h1>
    <div>
        <h3>基础下拉列表</h3>
        <select ng-model="seleted" ng-options="a.name for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
    </div>
    <div>
        <h3>自定义下拉显示名称:</h3>
        <select ng-model="seleted" ng-options="(a.name + '爱吃' + a.food) for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
    </div>
    <div>
        <h3>分组选项</h3>
        <select ng-model="seleted" ng-options="(a.name + '的爱好是' + a.favor) group by a.sex for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
    </div>
    <div>
        <h3>自定义ng-model的值</h3>
        <select ng-model="seletedId" ng-options="a.id as a.name for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
        <span ng-show="seletedId">自定义选择的ID为：{{ seletedId }}</span>
    </div>
    <h1>ng-options默认选择(三种方式)</h1>
    <div>
        <div>
            ng-model选中：
            <select ng-model="myPet">
                <option value="">我的宠物</option>
                <option ng-repeat="v in animalArr">{{ v }}</option>
            </select>
            ng-selected选中：
            <select>
                <option value="">你的宠物</option>
                <option ng-repeat="v in animalArr" ng-selected="yourPet == v">{{ v }}</option>
            </select>
            ng-options:选中：
            <select ng-model="taPet" ng-options="v for v in animalArr">
                <option value="">Ta的宠物</option>
            </select>
            <span style="color:red">注：ng-options时ng-model是需要的</span>
        </div>
    </div>
    <h1>显示HTML内容</h1>
    <div>
        <h3>原始绑定ng-bind内容：</h3>
        <div>
            <p ng-bind="article.title"></p>
        </div>
        <div ng-bind="article.content"></div>

        <h3>使用ng-bind-html绑定内容：</h3>
        <div>
            <p ng-bind-html="article.title | beSafeHtml"></p>
        </div>
        <div ng-bind-html="article.content | trustHtml"></div>
    </div>
    <h1>获取焦点 ng-focus</h1>
    <div>
        <div>演示实例：你可以点击获取焦点，当前焦点在：{{currFocus}}(普通js：target.getAttribute('name'))</div>
        <div>演示实例：你可以点击获取焦点，当前焦点在：{{jQCurrFocus}}(jQuery：$(target).attr('name'))</div>
        <ul ng-init="fields = ['name', 'sex', 'age', 'birthday', 'address', 'country']">
            <li ng-repeat="field in fields">
                <input type="text" name="{{field}}" placeholder="text your {{field}}" ng-model="user[field]" ng-focus="getCurrFocus($event.target)" ng-dblclick="user[field] = ''"/>
                <span ng-show="user[field]">{{field}}: 正在输入：{{user[field]}}</span>
                <ng-pluralize count="user[field]" when="{'0': 'Nobody is viewing.','one': '1 person is viewing-========.','2': '2 person is viewing---------.','other': '{} people are viewing.'}"></ng-pluralize>
            </li>
        </ul>
    </div>
    <h1>复制，粘贴</h1>
    <div>
        <ul>
            <li>
                <input type="text" placeholder="copy me" ng-copy="copy=true" value="copy me" />
                <span ng-show="copy">复制成功 cppy: {{copy}}</span>
            </li>
            <li>
                <input type="text" placeholder="cut me" ng-cut="cut=true" value="cut me" />
                <span ng-show="cut">剪切成功 cut: {{cut}}</span>
            </li>
            <li>
                <input type="text" placeholder="paste me" ng-paste="paste=true" />
                <span ng-show="paste">粘贴成功 paste: {{paste}}</span>
            </li>
        </ul>
    </div>
    <h1>城市列表下拉展示</h1>
    <div>
        <h3>第一版</h3>
        <div>
            选择省:
            <!-- your.province这个是被选择的整个数据 -->
            <select ng-model="your.province" ng-options="v.province for v in chinaCities">
                <option value="">请选择</option>
            </select>
            选择市:
            <!-- 循环这个被选中数据中的cities字段 -->
            <select ng-model="your.city" ng-options="v for v in your.province.cities">
                <option value="">请选择</option>
            </select>
        </div>
        <h3>第二版</h3>
        <div>
            <select ng-model="your.province" ng-options="v.province for v in chinaCities" ng-change="selectedFirstValue(your.province)">
                <option value="">请选择</option>
            </select>
            <select ng-model="your.city" ng-options="v for v in your.province.cities">
                <option value="">请选择</option>
            </select>
        </div>
        <h3>第三版</h3>
        <div>
            <select ng-model="your.province" ng-options="v.province for v in chinaCities" ng-change="selectedFirstValue(your.province)">
                <option value="" ng-if="!chinaCities && !your.province">请选择</option>
            </select>
            选择市：
            <select ng-model="your.city" ng-options="v for v in your.province.cities">
                <option value="" ng-if="!your.city">请选择</option>
            </select>
        </div>
    </div>
    <h1>TAB切换</h1>
    <div class="city-container">
        <div class="col-xs-12 big-title">城市列表 <span class="badge align-top" ng-bind="cityList.length"></span></div>
        <!-- 城市展示 -->
        <div class="row name-header">
            <div class="col-xs-2 name text-center" ng-class="{active:curInfo == v}" ng-repeat="v in cityList" ng-bind="v.city" ng-click="switchInfo(v)"></div>
        </div>
        <!-- 城市内容展示 -->
        <div class="row name-card">
            <div class="col-xs-12">
                <h1 ng-bind="curInfo.city + '简介:'"></h1>
                <div class="desc" ng-bind-html="trustHtml(curInfo.description)"></div>
            </div>
            <div>
                <ul class="nav nav-pills" role="tablist">
                    <li role="presentation" ng-repeat="v in cityList"><a href="" ng-bind="v.city" ng-click="switchInfo(v)"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <h1>定时器</h1>
    <div>
        <div class="ng-cloak" >当前时间：{{clock | date:'yyyy-MM-dd HH:mm:ss'}}</div>
    </div>
    <h1>表单验证</h1>
    <form class="form-horizontal" name="userForm" ng-submit="submitForm()">
        <div class="form-group">
            <h2 class="text-center">用户注册流程form验证</h2>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-5">
                <input type="text" name="name" class="form-control" placeholder="UserName" ng-model="user.name" required/>
            </div>
            <div class="col-sm-5">
                <table class="table table-bordered clean-bottom">
                    <tr>
                        <td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td>
                        <td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td>
                        <td ng-class="{ success: userForm.name.$dirty }">Dirty</td>
                        <td ng-class="{ success: userForm.name.$touched }">Touched</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">邮箱：</label>
            <div class="col-sm-5" ng-class="{ 'has-error': userForm.email.$invalid && !userForm.email.$pristine }">
                <input type="email" name="email" class="form-control" placeholder="Email" ng-model="user.email" required>
                <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">请输入有效的邮箱。</p>
            </div>
            <div class="col-sm-5">
                <table class="table table-bordered clean-bottom">
                    <tr>
                        <td ng-class="{ success: userForm.email.$valid, danger: userForm.email.$invalid }">Valid</td>
                        <td ng-class="{ success: userForm.email.$pristine, danger: !userForm.email.$pristine }">Pristine</td>
                        <td ng-class="{ success: userForm.email.$dirty }">Dirty</td>
                        <td ng-class="{ success: userForm.email.$touched }">Touched</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">手机：</label>
            <div class="col-sm-5" ng-class="{ 'has-error': userForm.phone.$invalid && !userForm.phone.$pristine }">
                <input type="number" name="phone" class="form-control" placeholder="Phone" ng-model="user.phone" ng-minlength="11" ng-maxlength="11" required>
                <p ng-show="userForm.phone.$invalid && !userForm.phone.$pristine" class="help-block">请输入您的手机号码。</p>
            </div>
            <div class="col-sm-5">
                <table class="table table-bordered clean-bottom">
                    <tr>
                        <td ng-class="{ success: userForm.phone.$valid, danger: userForm.phone.$invalid }">Valid</td>
                        <td ng-class="{ success: userForm.phone.$pristine, danger: !userForm.phone.$pristine }">Pristine</td>
                        <td ng-class="{ success: userForm.phone.$dirty }">Dirty</td>
                        <td ng-class="{ success: userForm.phone.$touched }">Touched</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-5">
                <input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" required ng-minlength="6">
                <div class="progress help-block" ng-show="user.password.length >= 6">
                    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: {{ (user.password.length - 6) / 2 * 10 + 50 }}%">
                        <span class="sr-only">40% Complete (success)</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <table class="table table-bordered clean-bottom">
                    <tr>
                        <td ng-class="{ success: userForm.password.$valid, danger: userForm.password.$invalid }">Valid</td>
                        <td ng-class="{ success: userForm.password.$pristine, danger: !userForm.password.$pristine }">Pristine</td>
                        <td ng-class="{ success: userForm.password.$dirty }">Dirty</td>
                        <td ng-class="{ success: userForm.password.$touched }">Touched</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-4">
                <table class="table table-bordered clean-bottom">
                    <tr>
                        <td ng-class="{ success: userForm.$valid, danger: userForm.password.$invalid }">Valid</td>
                        <td ng-class="{ success: userForm.$pristine, danger: !userForm.password.$pristine }">Pristine</td>
                        <td ng-class="{ success: userForm.$dirty }">Dirty</td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-4">
                <button type="submit" class="btn btn btn-primary col-sm-12" ng-disabled="userForm.$invalid">提交</button>
            </div>
        </div>
        <div class="form-group ng-cloak" ng-show="registerSuccess">
            <div class="col-sm-offset-2 alert alert-success" role="alert">
                <strong>恭喜您！</strong> 您成功注册用户<{{user.name}}>，账户即可生效！您可以<a href="javascript:location.reload();">重新操作</a>！
            </div>
        </div>
    </form>


</div>